<!DOCTYPE html>

<html>
<head>
  <title>JQM Scrolling</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <!-- <link href="JQMScrolling-master/content/jquery.mobile-1.1.0.min.css" rel="stylesheet" type="text/css" /> -->
  
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
  
  <link href="JQMScrolling-master/content/style.css" rel="stylesheet" type="text/css" />
  
  <!-- <script src="JQMScrolling-master/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script src="JQMScrolling-master/scripts/jquery.mobile-1.1.0.min.js" type="text/javascript"></script> -->
  
  
  
    
  
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
  
</head>
<body>
  <div id="homePage" data-role="page" data-rockncoder-jspage="homePage">
    <header data-role="header" data-position="fixed">
      <h1>JQM Scrolling</h1>
    </header>
    <section data-role="content">
      <ul data-role="listview" data-inset="true">
        <li><a href="#verticalPage">Vertical Scrolling</a></li>
        <li><a href="#horizontalPage">Horizontal Scrolling</a></li>
      </ul>
    </section>
    <footer data-role="footer" data-position="fixed">
      <h1>footer</h1>
    </footer>
  </div>
  <div id="verticalPage" data-role="page" data-rockncoder-jspage="verticalPage">
    <header data-role="header" data-position="fixed">
      <h1>Vertical</h1>
    </header>
    <section data-role="content"  class="scroller">
      <div id="verticalWrapper" >
        <div id="verticalScroller">
          <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
            <li>E</li>
            <li>F</li>
            <li>G</li>
            <li>H</li>
            <li>I</li>
            <li>J</li>
            <li>K</li>
            <li>L</li>
            <li>M</li>
            <li>N</li>
            <li>O</li>
            <li>P</li>
            <li>Q</li>
            <li>R</li>
            <li>S</li>
            <li>T</li>
            <li>U</li>
            <li>V</li>
            <li>W</li>
            <li>X</li>
            <li>Y</li>
            <li>Z</li>
          </ul>
        </div>
      </div>
    </section>
    <footer data-role="footer" data-position="fixed">
      <h2>(swipe vertically)</h2>
    </footer>
  </div>
  <div id="horizontalPage" data-role="page" data-rockncoder-jspage="horizontalPage">
    <header data-role="header" data-position="fixed">
      <h1>Horizontal</h1>
    </header>
    <section data-role="content" class="scroller">
      <div id="horizontalWrapper">
        <div id="horizontalScroller">
          <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
            <li>E</li>
            <li>F</li>
            <li>G</li>
            <li>H</li>
            <li>I</li>
            <li>J</li>
            <li>K</li>
            <li>L</li>
            <li>M</li>
            <li>N</li>
            <li>O</li>
            <li>P</li>
            <li>Q</li>
            <li>R</li>
            <li>S</li>
            <li>T</li>
            <li>U</li>
            <li>V</li>
            <li>W</li>
            <li>X</li>
            <li>Y</li>
            <li>Z</li>
          </ul>
        </div>
      </div>
    </section>
    <footer data-role="footer" data-position="fixed">
      <h1>(swipe horizontally)</h1>
    </footer>
  </div>
  <script src="js/iscroll-lite.js" type="text/javascript"></script>
  <script src="js/app.js" type="text/javascript"></script>
</body>
</html>
